<template>
  <div id="app">

    <a-layout id="components-layout-demo-custom-trigger" style="min-height: 100vh">
      <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
        <!--      logo-->
        <div class="logo">
          <!--        <img src="../assets/logo2.png"/>-->
          <a-icon type="smile"/>
        </div>

        <a-menu theme="dark" mode="inline" :default-selected-keys="['1']">
          <a-menu-item key="1" @click="hideDetails(),toPerson()">
            <a-icon type="user"/>
            <span>个人信息</span>
          </a-menu-item>
          <a-menu-item key="2" @click="openDetails">
            <a-icon type="video-camera"/>
            <span>随心听</span>
          </a-menu-item>
          <a-menu-item key="3" @click="hideDetails(),toUpload()">
            <a-icon type="upload"/>
            <span>歌曲自定</span>
          </a-menu-item>
        </a-menu>
      </a-layout-sider>
      <a-layout>

        <a-layout-header style="background: #fff; padding: 0">
          <a-space>
            <a-icon
                class="trigger"
                :type="collapsed ? 'menu-unfold' : 'menu-fold'"
                @click="() => (collapsed = !collapsed)"
            />
            <!--            搜索框-->
            <a-input-search placeholder="input search text" v-model="keyword" style="width: 200px" @search="onSearch"/>

            <div style="display: flex;align-items: center">
              <a-dropdown-button>
                {{ userInfoSimple.username }}
                <a-menu slot="overlay" @click="handleMenuClick">
                  <a-menu-item key="1" @click="showModal(true)" v-if="token.length ===0">
                    <a-icon type="login"/>
                    登陆
                  </a-menu-item>
                  <a-menu-item key="2" @click="showModal(false)" v-if="token.length ===0">
                    <a-icon type="user-add"/>
                    注册
                  </a-menu-item>
                  <a-menu-item key="3" @click="exitAccount">
                    <a-icon type="disconnect"/>
                    退出
                  </a-menu-item>
                </a-menu>
                <a-icon slot="icon" type="user"/>
              </a-dropdown-button>
            </div>


          </a-space>
          <!--          点击登陆按钮，展出登陆表单-->
          <a-modal
              title="Title"
              :visible="visible"
              :confirm-loading="confirmLoading"
              @ok="handleOk"
              @cancel="handleCancel"
          >
            <LoginForm v-if="showLoginForm" @isLogin="shutModal" @toRegister="openRegisterModal"></LoginForm>
            <RegisterForm v-if="!showLoginForm" @isRegister="openLoginModal"></RegisterForm>
          </a-modal>

        </a-layout-header>
        <a-layout-content
            :style="{ margin: '24px 16px', padding: '24px 5px 0px 5px', background: '#fff', minHeight: '280px' }"
        >
          <!--          Content-->

          <MusicDetails :searchVal="keyword" style="min-height: 270px;height: 100% ;"
                        v-show="showDetails"></MusicDetails>
          <router-view v-show="!showDetails" :showPersonInfo="isLogin"></router-view>

        </a-layout-content>

        <a-layout-footer style="background-color:#bbbaba;text-align: center ;margin:0; padding: 5px;">
          2022--02-22 川 备案号：10086112324
        </a-layout-footer>
      </a-layout>
    </a-layout>

  </div>
</template>
<script>

import MusicDetails from "@/views/musicDetails";
import Aplayer from 'vue-aplayer'
import LoginForm from "@/components/LoginForm";
import RegisterForm from "@/components/RegisterForm";
import {mapState, mapMutations} from "vuex";

export default {
  created() {
    localStorage.clear()
  },
  mounted() {
    // this.userName = localStorage.getItem("userName")

  },
  data() {
    return {
      keyword: '',
      title: '',
      artist: '',
      musicSrc: '',
      imgSrc: '',
      collapsed: false,
      showDetails: false,
      // userName: localStorage.getItem("userName"),
      visible: false,
      confirmLoading: false,
      showLoginForm: {type: Boolean, default: false},
      // showForm: localStorage.getItem("token"),
      isLogin: false,

    }
  },
  components: {
    MusicDetails,
    Aplayer,
    LoginForm,
    RegisterForm
  },
  computed: {
    ...mapState(['userInfoSimple', 'token'])
  },
  methods: {
    ...mapMutations(['logout']),
    openRegisterModal(){
      this.showLoginForm = false
    },
    openLoginModal(data){
      this.showLoginForm = true
    },
    shutModal(data) {
      this.handleOk(data)
      this.isLogin = true
    },
    exitAccount() {
      localStorage.removeItem("userName")
      localStorage.removeItem("token")
      this.logout()
      // 退出登陆后强刷页面
      this.$router.go(0)
    },
    // model确认触发
    handleOk(data) {
      this.confirmLoading = data;
      setTimeout(() => {
        this.visible = !data;
        this.confirmLoading = !data;
      }, 2000);
    },
    // model取消触发
    handleCancel(e) {
      this.visible = false;
    },
    showModal(flag) {
      // 控制弹框展开
      this.showLoginForm = flag
      this.visible = true;
    },
    handleMenuClick(e) {
      console.log('click', e);
    },
    onSearch() {
      // 跳转到音乐详情页，并且携带搜索内容
      this.$router.push("/musicDetails")
    },
    hideDetails() {
      this.showDetails = false
    },
    openDetails() {
      this.showDetails = true
      this.$router.push("/musicDetails")
    },
    toPerson() {
      this.$router.push("/personal")
    },
    toUpload() {
      this.$router.push("/uploadPage")
    }
  }

}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  width: 100%;
  min-height: 100%;
}

#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;
  /*background: rgba(255, 255, 255, 0.2);*/
  margin: 16px;
  overflow: hidden;
  text-align: center;
  font-size: 24px;


}


</style>
